<template>
  <div>
    <div v-if="flag == 0">
      <el-table :data="dataList.customer_card" style="width: 100%">
        <el-table-column label="名称" prop="card_name" width="" />
        <el-table-column label="余额" prop="card_balance" width="" />
        <el-table-column label="总额" prop="card_value" width="" />
        <el-table-column label="操作" prop="">
          <template slot-scope="scope">
            <el-button type="primary" @click="details(scope.row)">
              转赠
            </el-button>
            <el-button type="primary" @click="balance(scope.row)">
              调整余额
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="flag == 1">
      <div>选择孩子</div>
      <div style="margin-top: 10px">
        <div filterable style="margin-right: 15px">
          <el-select
            v-model="forms.original_member_id"
            clearable
            filterable
            placeholder="请选择孩子"
            remote
          >
            <el-option
              v-for="(item, index) of dataList.customer_member"
              :key="index"
              :label="item.nick_name"
              :value="item.customer_member_id"
            />
          </el-select>
        </div>
      </div>
      <div style="margin-top: 10px">转移家庭组</div>
      <div style="display: flex; margin-top: 10px">
        <!-- 选择家庭组 -->
        <div filterable style="margin-right: 15px">
          <el-select
            v-model="forms.receive_group_id"
            clearable
            filterable
            placeholder="请选择客户"
            remote
            @change="groupIdChange"
          >
            <el-option
              v-for="(item, index) of getCusGroupList"
              :key="index"
              :label="item.group_name"
              :value="item.group_id"
            />
          </el-select>
        </div>
        <!-- 选择家长 -->
        <div style="margin-right: 15px">
          <el-select
            v-model="forms.receive_customer_id"
            clearable
            placeholder="请选择家长"
          >
            <el-option
              v-for="(item, index) of user"
              :key="index"
              :label="item.cus_name"
              :value="item.id"
            />
          </el-select>
        </div>
        <!-- 选择孩子 -->
        <div>
          <el-select
            v-model="forms.receive_member_id"
            clearable
            placeholder="请选择孩子"
          >
            <el-option
              v-for="(item, index) of child"
              :key="index"
              :label="item.nick_name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
      <div style="margin-top: 10px">
        <el-input
          v-model="forms.remark"
          maxlength="30"
          placeholder="请输入备注"
          show-word-limit
          type="textarea"
        />
      </div>
      <div style="margin-top: 10px">
        <el-button @click="show">返回</el-button>
        <el-button type="primary" @click="pass">转赠</el-button>
      </div>
    </div>
    <div v-if="flag == 2">
      <el-form label-position="right" label-width="80px" :model="form">
        <el-form-item label="添加或削减">
          <el-radio-group v-model="form.type">
            <el-radio :label="'add'">加</el-radio>
            <el-radio :label="'sub'">减</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="form.num" />
        </el-form-item>
        <el-form-item label="金额">
          <el-input
            v-model="form.remark"
            maxlength="30"
            placeholder="请输入备注"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <div style="margin-top: 10px">
        <el-button @click="show">返回</el-button>
        <el-button type="primary" @click="SubmitBalance">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  // import { cusGroupDetail } from '@/api/level'
  import {
    getCusGroup,
    customerCardMove,
    cardBalanceAdjuste,
  } from '@/api/gustomerGroup'
  export default {
    components: {},
    props: {
      dataList: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        tableData: [],
        langs: JSON.parse(window.localStorage.getItem('lang')),
        page: 1,
        flag: 0,
        forms: {
          receive_group_id: '',
          receive_customer_id: '',
          receive_member_id: '',
          original_group_id: this.dataList.group.group_id,
          original_customer_id: this.dataList.customer.customer_id,
          original_member_id: '',
          remark: '',
        },
        form: {
          id: '',
          type: '',
          num: '',
          remark: '',
        },
        getCusGroupList: [],
        user: '',
        child: '',
      }
    },
    watch: {},

    mounted() {
      this.init()
    },
    methods: {
      init() {
        getCusGroup().then((res) => {
          this.getCusGroupList = res.data
        })
      },
      details(e) {
        this.forms.customer_card_id = e.id
        this.forms.card_value = e.card_value
        this.forms.card_balance = e.card_balance
        this.flag = 1
      },
      balance(e) {
        this.form = {
          id: '',
          type: '',
          num: '',
          remark: '',
        }
        this.form.id = e.id
        this.flag = 2
      },
      SubmitBalance() {
        cardBalanceAdjuste(this.form).then(() => {
          this.flag = 0
          this.$emit('showMain')
        })
      },

      // 获取家庭组，用户(家长，孩子)

      groupIdChange(e) {
        this.forms.receive_customer_id = ''
        this.forms.receive_member_id = ''
        this.getCusGroupList.forEach((j) => {
          if (j.group_id == e) {
            this.user = j.user
            this.child = j.child
          }
        })
      },
      show() {
        this.flag = 0
      },
      pass() {
        customerCardMove(this.forms)
          .then(() => {
            this.$emit('showMain')
            this.$message({
              message: '转赠成功',
              type: 'success',
            })
          })
          .catch(() => {
            this.$message.error('转赠失败')
          })
        //
        this.flag = 0
      },
      goBack() {
        this.$emit('showMain')
      },
    },
  }
</script>

<style></style>
